<template>
  <div class="iframe">
    <div class="i-title">
      <h3>toRef与toRefs</h3>
    </div>
    <div class="i-tip">对象值：{{ obj.name }}</div>
    <div class="i-tip">对象值：{{ obj.age }}</div>
    <div class="i-tip">单个值：{{ name }}</div>
    <div class="i-tip">单个值：{{ age }}</div>
    <div class="i-tip">
      <el-button @click="updateObj">修改</el-button>
    </div>
  </div>
</template>

<script>
  import {
    reactive,
    toRefs,
    toRef
  } from "vue";
  export default {
    name: "hello",
    setup() {
      const obj = reactive({
        name: "陶国荣",
        age: 18
      });
      // 单个响应
      // const name = toRef(obj, "name");
      // const age = toRef(obj, "age");
      // 多个响应
      const {
        name,
        age
      } = toRefs(obj);
      const updateObj = () => {
        obj.name = "tgrong";
        obj.age = 28;
      };
      return {
        obj,
        name,
        age,
        updateObj,
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
